<template>
	<view class="boxAll themeBga">
		<!-- 轮播 -->
		<view class="swiper mb22">
			<uv-swiper :list="list" height="154"></uv-swiper>
		</view>
		<!-- 广告位 -->
		<view class="advertising mb22 border12"></view>
		<!-- 推荐活动 -->
		<view class="activity themeColor border12 fff fz20 mb20"  >推荐活动</view>
		<!-- 商家信息 -->
		<view class="merchantInfo flex justifyBetween">
			<view class="infoBox themeMask mb20" v-for="item in 10" :key="item" @click="goUrl('/pages/core/detail/detail')">
				<image class="merImg themeColor" src=""></image>
				<view class="merInfo">
					<view class="flex justifyBetween mb10">
						<uv-text :lines="1" text="商家名称" size="14"></uv-text>
						<view class="flex">
							<view class="order border6 mr14">点</view>
							<view class="reserve border6">预</view>
						</view>
					</view>
					<view class="flex justifyBetween fz24 mb10">
						<view class="black">中式快餐</view>
						<view class="flex  gray">距离2.1km</view>
					</view>
					<uv-text :lines="2" text="喀左县翻斗街道翻斗花园翻斗号001号大头儿子家" size="12" color="#525252"></uv-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const list = [
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	]
	// 跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url,
		})
	}
</script>

<style lang="scss" scoped>
	//广告位
	.advertising {
		width: 100%;
		height: 182rpx;
		background-color: #f3d08f;
	}

	// 推荐活动
	.activity {
		width: 100%;
		height: 162rpx;
		text-align: center;
		line-height: 162rpx;
	}
	
	// 商家信息
	.merchantInfo{
		flex-wrap: wrap;
		
		.merImg{
			width: 350rpx;
			height: 350rpx;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
		}
		.merInfo{
			width: 350rpx;
			padding: 12rpx 10rpx;
			.order{
				padding:2rpx 6rpx;
				background-color: #f3d08f;
				color: #e4980a;
			}
			.reserve{
				padding:2rpx 6rpx;
				background-color: #fc8585;
				color: #f80000;
			}
		}
	}

</style>